<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>taobao首页轮播原生js面对对象封装版</title>
    <style>
        body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        main {
            width: 400px;
            margin: 0 auto;
        }

        #box {
            position: relative;
            margin: 10px auto;
            width: 492px;
            height: 172px;
        }

        #box .imgList {
            position: relative;
            width: 490px;
            height: 170px;
            overflow: hidden;
        }

        .imgList li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #box .countNum {
            position: absolute;
            right: 0;
            bottom: 5px;
        }

        .countNum li {
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 5px;
            color: #fff;
            border-radius: 50%;
            background-color: #f9cc9d;
            text-align: center;
            line-height: 20px;
            opacity: .8;
            cursor: pointer;
        }

        .countNum .current {
            background-color: red;
            font-weight: 700;
            opacity: 1;

        }
    </style>

</head>

<body>
    <main>
        <h1>Author:wyf</h1>
        <p>2012/2/24</p>
    </main>
    <div id="box"></div>
    <script>
        class RunImg {
            constructor() {
                this.bigbox = null;
                this.boxul = null;
                this.imgList = null;
                this.numList = null;
                this.index = 0;
                this.timer = null;
                this.play = null;
                this.imgurl = [];
                this.count = 0;
            }
            el(obj) {
                return document.querySelector(obj);
            }
            info(id) {
                this.count = this.count <= 5 ? this.count : 5;
                this.bigbox = this.el(id);
                for (let i = 0; i < 2; i++) {
                    let ul = this.el('ul');
                    for (var j = 1; j <= this.count; j++) {
                        let li = this.el('li');
                        li.innerHTML = i === 0 ? this.imgurl[j - 1] : j;
                        ul.appendChild(li)
                    }
                    this.bigbox.appendChild(ul)
                }
                this.boxul = this.bigbox.querySelectorAll(ul);
                this.boxul[0].className = 'imgList';
                this.boxul[1].className = 'countNum';
                this.imgList = this.boxul[0].querySelectorAll('li')
                this.numList = this.boxul[1].querySelectorAll('li');
                this.numList[0].className = 'current';
            }
            action(id) {
                this.autoPlay();
                this.mousemoveout(this.bigbox, this.numList);

            }
            imgShow(num, numList, imgList) {
                this.index = num;
                var alpha = 0;
                numList.forEach((dom) => {
                    dom.className = ''
                })

                clearInterval(this.timer);
                imgList.forEach(dom => {
                    dom.style.opacity = 0
                })
                let _this = this;
                this.timer = setInterval(() => {
                    alpha += 2;
                    if (alpha > 100) {
                        alpha = 100
                    }
                    imgList[_this.index].style.opacity = alpha / 100;
                    if (alpha === 100) {
                        clearInterval(this.timer)
                    }
                }, 20);
            }
            autoPlay() {
                this.play = setInterval(() => {
                    this.index = (this.index + 1) % this.imgList.length;
                    this.imgShow(this.index, this.numList, this.imgList)
                }, 20)
            }
            mousemoveout(box, numList) {
                let that = this;
                box.onmouseover = function () {
                    clearInterval(that.play)
                }
                box.onmouseout = function () {
                    that.autoPlay(that.index)
                }
                numList.forEach((v, i) => {
                    v.index = i;
                    v.onmouseover = function () {
                        that.imgShow(this.index, that.numList, that.imgList)
                    }
                })
            }
        }






        window.onload = function () {
            var runimg = new RunImg();
            runimg.count = 5;
            runimg.imgurl = [
                "<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
                "<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
                "<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>",
                "<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>",
                "<img src=\"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"];
            runimg.info("#box");
            runimg.action("#box");
        }

    </script>
</body>

</html>